<template>
    <div>
        <!-- <div>当前count的值：{{count}}</div> -->
        <h3>{{this.$store.gertters.showNum}}</h3>
        <button @click="btnHandlert">+1</button>
        <button @click="btnHandlert2">+n</button>
        <button @click="btnHandlert3">+1 asy</button>
        <button @click="btnHandlert4">+n asy</button>
       
    </div>
    
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{};
    },
    computed:{
        ...mapState(['count'])
    },
    methods:{
      btnHandlert(){
          this.$store.commit('add');
      },
      btnHandlert2(){
           this.$store.commit('addN',3);
      },
      //异步操作实现count自增+1
      btnHandlert3(){
        this.$store.dispatch('addAsync')
      },
      btnHandlert4(){
         this.$store.dispatch('addNAsync',3)
      },
    }
}
</script>

